<script setup>
import { ref } from "vue";

import MaterialButton from "@/components/MaterialButton.vue";
let buttonType = ref(0);
defineProps({
    data: {
        type: Array,
        required: true,
        // heading: {
        //     type: Array,
        //     required: true,
        // },
        // description: {
        //     type: String,
        //     required: true,
        // },
        // items: {
        //     type: Array,
        //     required: true,
        //     image: {
        //         type: String,
        //         required: true,
        //     },
        //     title: {
        //         type: String,
        //         required: true,
        //     },
        //     subtitle: {
        //         type: String,
        //         required: true,
        //     },
        // },
    },
    headData: {
        type: Object,
        required: true,
        leftText: String,
        rightText1: String,
        rightText2: String,
        rightText3: String,
    },
    title: {
        type: String,
    },
    buttonText: {
        type: Array,
    },
    col1: {
        type: String,
        default: "col-lg-3",
    },
    col2: {
        type: String,
        default: "col-lg-9",
    },
});
</script>
<script>
export default {
    inheritAttrs: false,
};
</script>
<template>
    <section>
        <div class="py-4">
            <h1 style="color: red; text-align: center" data-aos="fade-up">{{ title }}</h1>
        </div>
        <div class="row justify-space-between text-center py-2">
            <div class="col-12 mx-auto">
                <MaterialButton
                    v-for="(item, index) in buttonText"
                    :key="index"
                    variant="gradient"
                    :color="buttonType == index ? 'danger' : 'light'"
                    class="w-auto me-2 py-3"
                    @click="
                        () => {
                            buttonType = index;
                        }
                    "
                    >{{ item }}</MaterialButton
                >
            </div>
        </div>
        <div class="container mt-sm-5 mt-3">
            <div v-for="({ heading, description, items }, index) in data[buttonType]" :class="`row ${index != 0 && index != -1 ? 'pt-lg-6' : ''}`" :key="heading">
                <div class="col-lg-1" data-aos="fade-right">
                    <div class="position-sticky pb-lg-5 pb-3 mt-lg-0 mt-5 ps-2" style="top: 100px">
                        <h3 style="padding: 0.5rem; background-color: red; color: #fff" class="text-center">{{ index + 1 }}</h3>
                    </div>
                </div>
                <div class="col-lg-11" data-aos="fade-left">
                    <h4>{{ heading }}</h4>
                    <div v-for="(text, index) in items" :key="index">
                        <h6 v-if="typeof text == 'string'">· {{ text }}</h6>
                        <div v-else>
                            <h6 v-if="text.title.length > 10"><span style="color: red; font-size: 2rem">-</span> {{ text.title }}</h6>
                            <h5 v-else><span style="color: red; font-size: 2rem">-</span> {{ text.title }}</h5>
                            <h6 v-html="text.subTitle"></h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
